<template>
  <div>
    <div class="saleMenTop">
      <label for="">条件查询</label>
      <el-input placeholder="订单流水号" v-model.lazy="mySearchInput" clearable>
      </el-input>
      <el-button
        type="primary"
        @click="clickSearchOrders"
        style="backgroundColor:#009688;height:40px;width:80px;margin-top:4px;
            "
        >查询</el-button
      >
      <div style="margin-left:560px;">
 <label for="" style="color:#009688 ">支付状态筛选：</label>
     <el-select v-model="state" placeholder="请选择"  @change="changeState()" id="selectOrders">
        <el-option
   
      v-for="item in ordersState"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </div>
     
   
    </div>
    <div class="companyContent">
      <!--  -->
      <el-table :data="ordersData" stripe border style="width: 100%;padding:0 10px">
        <!-- <el-table-column fixed prop="_id" label="_id" width="250">
        </el-table-column> -->
        <el-table-column prop="flowNum" label="订单流水" width="120">
        </el-table-column>
        <el-table-column
          
          prop="customersId.name"
          label="客户姓名"
          width="100"
        >
        </el-table-column>
        <!--  -->
        <el-table-column
        
          prop="ordersName"
          label="收件人"
          width="100"
        >
        </el-table-column>
        <!--  -->
        <!--  -->
        <el-table-column
          
          prop="ordersPhone"
          label="收件电话"
          width="120"
        >
        </el-table-column>
        <!--  -->
        <el-table-column
          prop="customersId.age"
          label="客户年龄"
          width="100"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="productsId.classesId.insuresTypeName"
          label="保险类别"
          width="120"
        >
        </el-table-column> -->
        <el-table-column
          prop="productsId.name"
          label="产品"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="productsId.price" label="价格" width="120">
        </el-table-column>
        <el-table-column label="订单状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">未支付</span>
            <span v-if="scope.row.state == 2">已支付</span>
            <span v-if="scope.row.state == 3">已取消</span>
          </template>
        </el-table-column>
        <el-table-column prop="dealTime" label="提交时间" width="120">
        </el-table-column>
        <el-table-column prop="saleMenId.name" label="所属销售" width="120">
        </el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color:#009688;"
              @click="lookOrders(scope.row._id)"
              >查看详情</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="delOneClick(scope.row._id)"
              style="color:#009688;"
              >删除</el-button
            >
            <!-- 修改 -->
            <el-button
             v-if="scope.row.state == 1 || scope.row.state == 3 || scope.row.outOrdersState==2 ||scope.row.outOrdersState==1"
              type="text"
              size="small"
               disabled
             
             style="color:gray;"
              >修改</el-button
            >
            <el-button
                  v-else
                  type="text"
                  size="small"
                  @click="modifyOrders(scope.row._id)"
                  style="color:#009688;"
                
                  >修改
                </el-button>
        
                
         
             <!-- 退货 -->
             <!-- 1he 3 未支付状态，不能申请退保 -->
                <el-button
                  v-if="scope.row.state == 1 || scope.row.state == 3"
                  type="text"
                  size="small"
               
                  style="color:gray;"
                  disabled

                  >退保申请
                </el-button>
                <!--  -->
                <el-button
                  v-else-if="scope.row.outOrdersState==1"
                  type="text"
                  size="small"
                
                  style="color:red;"
                 disabled
                  >退保待审核
                </el-button>
                <el-button
                  v-else-if="scope.row.outOrdersState==2"
                  type="text"
                  size="small"
                 
                  style="color:red;"
                 disabled
                  >已通过退保
                </el-button>
                <el-button
                  v-else-if="scope.row.outOrdersState==3"
                  type="text"
                  size="small"
                  @click="clickOutOrders(scope.row._id)"
                  style="color:red;"
                
                  >被拒绝,重新提交
                </el-button>
                <el-button
                  v-else
                  type="text"
                  size="small"
                  @click="clickOutOrders(scope.row._id)"
                  style="color:#009688;"
                
                  >申请退保
                </el-button>
             
          
          </template>
        </el-table-column>
      </el-table>
      <!--  -->
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "orders"
);
// const { mapState:adminsMapState } = createNamespacedHelpers(
//     "admins"
// );

export default {
  data() {
    return {
       ordersState: [
         {
          value: 1,
          label: '未支付'
        }, 
         {
          value: 2,
          label: '已支付'
        }, 
         {
          value: 3,
          label: '已取消'
        }, 
        ],
        state:'',
    };
  },
  mounted() {
    this.getOrdersBySaleMenId();
    this.state='';
  },
  computed: {
    ...mapState(["ordersData", "searchValue"]), //  获取state的数据，state相当于data(){}
    mySearchInput: {
      get() {
        return this.searchValue;
      },
      set(val) {
        this.setSearchValue(val);
      },
    },
  },
  methods: {
    ...mapMutations(["setSearchValue"]),
    ...mapActions([
      "getOrders",
      "getOrdersByOrdersId",
      "getOrdersBySaleMenId",
      "delOneOrders",
      'getOrdersByState',
    ]),
    clickSearchOrders() {
      // 当点击查询按钮，调用获取对公信息，并把输入框的值传到后端
      this.getOrdersBySaleMenId();
       this.state='';
    },
    // 根据订单id查看该订单详情 (订单相关的信息)
    lookOrders(_id) {
      // 传送该订单的id
      // console.log({_id});
      this.getOrdersByOrdersId({ _id });
      // 获取个人订单详情
      this.$router.push("/salesMenSystem/xOrders/xOneOrdersDetails");
     
    },
    delOneClick(_id) {
    //   console.log(_id); // 56545615165
      this.delOneOrders({ _id });
      this.getOrdersBySaleMenId();
    },
    // 退货
    clickOutOrders(_id) {
   
      localStorage.oneOrdersId = _id; //  订单的id ，保存到本地，再在退保界面中获取，退出时删除
      this.getOrdersByOrdersId({ _id });
         this.$router.push('/salesMenSystem/xOutOrders')
    },

    // 修改
    modifyOrders(_id){
         localStorage.oneOrdersId = _id; //  订单的id ，保存到本地，再在退保界面中获取，退出时删除
      this.getOrdersByOrdersId({ _id });
         this.$router.push('/salesMenSystem/xModifyOrders')
    },
changeState(){
  this.getOrdersByState(this.state);
}
  },
};
</script>

<style scoped lang="scss">
.companyContent {
  margin-top: 15px;
  //     .el-button{
  //       padding: 0px;
  // }
}

.saleMenTop {
  display: flex;
}
.saleMenTop > label,
.el-input {
  line-height: 40px;
  margin-right: 10px;
}

.saleMenTop .el-input {
  width: 250px;
}
// textarea[readonly], select[disabled], input[readonly] {
//   background-color: #fff !important;
// }
</style>
